<script lang="ts" setup>
import { datetimeFormat } from "@/utils/date";
import { reactive } from "vue";

const messages = reactive([
    { message: "今日总销售额已达到￥200,000，相比昨日增长5%", time: Date.now() + 1 },
    { message: "黄瓜库存低至安全线以下，剩余量仅够3天销售，请尽快补货", time: Date.now() + 2 },
    { message: "竞争对手爱采购下调番茄批发价10%，市场反应热烈，考虑应对策略", time: Date.now() + 3 },
    { message: "本周回头客占比提升至45%，忠诚度计划效果显著", time: Date.now() + 4 },
    { message: "夏季清凉饮品促销活动参与人数突破1000，销售额提升25%", time: Date.now() + 5 },
    { message: "线上渠道销售额占比达到53%", time: Date.now() + 6 },
    { message: "第2345号订单已出库，预计明天上午10点前送达客户手中", time: Date.now() + 7 },
    { message: "草莓收到好评率98%，客户反馈口感鲜美，建议增加供应", time: Date.now() + 8 },
    { message: "根据本月销售趋势，预计下月销售额将达到￥800,000", time: Date.now() + 9 },
]);
fn();
function fn() {
    setTimeout(() => {
        messages.unshift({ message: messages.pop()!.message, time: Date.now() });
        fn();
    }, 3000);
}
</script>

<template>
    <section>
        <cite>
            <svg class="icon" aria-hidden="true"><use xlink:href="#icon-earth-full"></use></svg>
            <h1>消息中心</h1>
        </cite>
        <TransitionGroup tag="div" class="content" name="list">
            <p v-for="v in messages" :key="v.time">
                <svg class="icon" aria-hidden="true"><use xlink:href="#icon-xinxi"></use></svg>
                <span>{{ v.message }}</span>
                <time>{{ datetimeFormat(v.time, "Y-M-D") }}</time>
            </p>
        </TransitionGroup>
    </section>
</template>

<style lang="scss" scoped>
@use "../styles/section.scss";
@use "@/styles/mixins";
section {
    .content {
        display: flex;
        flex-direction: column;
        overflow: auto;
        row-gap: 10px;
        &::-webkit-scrollbar {
            width: 0;
            height: 0;
        }
        p {
            padding: 0 10px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            height: 40px;
            column-gap: 10px;
            background-color: #e3ffff33;
            .icon {
                color: #528ed2;
                font-size: 24px;
            }
            span {
                flex: 1;
                font-size: 14px;
                color: #637486;
                @include mixins.text-ellipsis();
            }
            time {
                color: #999;
                font-size: 12px;
            }
        }
    }
}
</style>
